<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>区域信息</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/static/common/layui/css/layui.css" media="all">
    <script type="text/javascript" src="/static/common/js/jquery-3.3.1.min.js"></script>
    <script type="text/javascript" src="/static/common/layui/layui.js"></script>
    <style type="text/css">
        .calss-a {
            text-decoration: underline !important;
        }

    </style>
</head>
<body>
<div class="layui-form">
    <div class="layui-input-inline" style="width: 280px;">
        <div class="layui-input-block">
            <select name="county_id" id="county_id" lay-verify="required" lay-filter="county">
                <option value="">请选择区域</option>
            <#list data as d>
                <#if d.parent_id==0>
                    <option value="${d.county_id}">${d.name}</option>
                </#if>
            </#list>
            </select>
        </div>
    </div>
    <div class="layui-inline" style="width: 170px;">
        <select name="trade_area_id" id="tradeArea" lay-filter="tradeArea" lay-verify="required">
            <option value="">请选择商圈</option>
        </select>
    </div>
    <div class="layui-input-inline" style="width: 288px;">
        <select name="building_id" id="building_id" lay-filter="building_id" lay-verify="required">
            <option value="">请选择楼盘</option>
        </select>
    </div>
    <div class="layui-input-inline" style="width: 100px;">
        <label class="layui-form-label">
            <button class="layui-btn" onclick="keyword()">查询</button>
        </label>
    </div>
</div>
<table class="layui-hide" id="test" lay-filter="barDemo"></table>
<script type="text/html" id="switchTpl">
    <input type="checkbox" name="sex" value="{{d.houes_id}}" lay-skin="switch" lay-text="是|否" lay-filter="showCode" {{ d.showCode== 1 ? 'checked' : '' }}>
</script>
<script type="text/html" id="topTpl">
    <input type="checkbox" name="topCode" value="{{d.houes_id}}" lay-skin="checkbox" title="置顶" lay-filter="topCode" {{ d.topCode== 1 ? 'checked' : '' }}>
</script>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="SEE">查看</a>
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script type="text/html" id="imgTpl">
    {{#
    var fn = function(obj){
    var json= JSON.parse(obj);
    return json.minPath;
    };
    }}
    <div>
        <img src="{{ fn(d.cover_img_path) }}">
    </div>
</script>
<script type="text/html" id="trade_areaTpl">
    {{#
    var fn = function(trade_area_id){
    var json= JSON.parse('${dataJson}');
    var name='';
    for( var i=0;i
    <json.length;i++){
    if(trade_area_id==json[i].county_id){
    name=json[i].name;
    }
    }
    return name;
    };
    }}
    <div>
        {{ fn(d.trade_area_id) }}
    </div>
</script>
<script type="text/html" id="countyTpl">
    {{#
    var fn = function(county_id){
    var json= JSON.parse('${dataJson}');
    var name='';
    for( var i=0;i
    <json.length;i++){
    if(county_id==json[i].county_id){
    name=json[i].name;
    }
    }
    return name;
    };
    }}
    <div>
       {{ fn(d.county_id) }}
    </div>
</script>
<script type="text/html" id="coveredAreaTpl">
    <div>
        {{ d.coveredArea}} ㎡
    </div>
</script>
<script type="text/html" id="usableAreaTpl">
    <div>
        {{ d.usableArea}} ㎡
    </div>
</script>
<script type="text/html" id="rentMoneyTpl">
    <div>
        {{ d.rentMoney}} {{ d.rentUnit}}
    </div>
</script>
<script type="text/html" id="sellMoneyTpl">
    <div>
        {{ d.sellMoney}} {{ d.sellUnit}}
    </div>
</script>
</body>

<script type="text/javascript">
    var attr = $("#attribute-show").html();
    $("#attribute-show").html('');
    keyword();

    function keyword() {
        var trade_area_id = $("#tradeArea").val();
        var county_id = $("#county_id").val();
        if(county_id==null){
            county_id='';
        }
        var building_id = $("#building_id").val();
            if(building_id==null){
                building_id='';
            }
        layui.use('table', function () {
            var table = layui.table,
                    form = layui.form;
            table.render({
                elem: '#test',
                url: '/officeBuilding/house/ajaxList.do?&county_id=' + county_id + '&trade_area_id=' + trade_area_id+'&building_id='+building_id,
                cellMinWidth: 40,
                limit: 20,
                cols: [[
                    {field: 'houes_id', title: 'ID', width: "80", sort: true},
                    {field: 'create_time', title: '创建时间', width: "120"},
                    {field: 'modify_time', title: '修改时间', width: "120", sort: true},
                    {field: 'county_id', title: '区域', width: "70", sort: true, templet: '#countyTpl'},
                    {field: 'trade_area_id', title: '商圈', width: "110", sort: true, templet: '#trade_areaTpl'},
                    {field: 'building_name', title: '楼盘名称', width: "110"},
                    {field: 'coveredArea', title: '建筑面积', width: "90",sort: true,templet: '#coveredAreaTpl'},
                    {field: 'usableArea', title: '使用面积', width: "90",sort: true,templet: '#usableAreaTpl'},
                    {field: 'rentMoney', title: '租金', width: "130",sort: true,templet: '#rentMoneyTpl'},
                    {field: 'sellMoney', title: '售价', width: "130",sort: true,templet: '#sellMoneyTpl'},
                    {field: 'contacts', title: '联系人', width: "130"},
                    {field: 'cover_img_path', title: '图片', width: "120", templet: "#imgTpl"},
                    {field: 'showCode', title: '是否上线', width: 100, sort: true, templet: '#switchTpl'},
                    {field: 'topCode', title: '是否置顶', width: 100, sort: true, templet: '#topTpl'},
                    {fixed: 'right', title: '操作', width: "220", templet: '#barDemo'},
                ]],
                page: true
            });
            /**************************insulate**********************************/
            //区域选址
            form.on('select(county)', function (data) {
                $.post("/officeBuilding/building/ajaxTradeArea.do", {id: data.value}, function (result, status) {
                    $("#tradeArea").html('');
                    $("#building_id").html('');
                    for (i = 0; i < result.data.length; i++) {
                        $("#tradeArea").append('<option value="' + result.data[i].county_id + '">' + result.data[i].name + '</option>')
                    }
                    form.render('select');
                }, "json");
            });
            /**************************insulate**********************************/
            //楼盘
            form.on('select(tradeArea)', function (data) {
                if(data.value==''){
                    layer.alert('请先选址区域', {icon: 0});
                    return false;
                }
                $.post("/officeBuilding/house/ajxaBuilding.do", {trade_area_id: data.value}, function (result, status) {
                    $("#building_id").html('');
                    for (i = 0; i < result.data.length; i++) {
                        $("#building_id").append('<option value="' + result.data[i].building_id + '">' + result.data[i].building_name + '</option>')
                    }
                    form.render('select');
                }, "json");
            });
            /**************************insulate**********************************/
            //监听性别操作
            form.on('checkbox(topCode)', function (obj) {
                $.post("/officeBuilding/house/statusTop.do", {id: obj.value}, function (result, status) {
                    if (status == "success") {
                        layer.msg('操作成功!', {icon: 1});
                    } else {
                        layer.msg('操作失败!', {icon: 2});
                    }
                }, "json");
            });
            /**************************insulate**********************************/
            //监听性别操作
            form.on('switch(showCode)', function (obj) {
                $.post("/officeBuilding/house/status.do", {id: obj.value}, function (result, status) {
                    if (status == "success") {
                        layer.msg('操作成功!', {icon: 1});
                    } else {
                        layer.msg('操作失败!', {icon: 2});
                    }
                }, "json");
            });
            /**************************insulate**********************************/
            //监听工具条
            table.on('tool(barDemo)', function (obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
                var  form = layui.form;
                var data = obj.data; //获得当前行数据
                var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
                var tr = obj.tr; //获得当前行 tr 的DOM对象
                if (layEvent === 'del') { //删除
                    layer.confirm('真的删除行么', function (index) {
                        obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                        layer.close(index);
                        //向服务端发送删除指令
                        $.post("/officeBuilding/house/delete.do", {id: data.houes_id}, function (result, status) {
                            if (status == "success") {
                                layer.msg('删除成功!', {icon: 1});
                            } else {
                                layer.msg('删除失败!', {icon: 2});
                            }
                        }, "json");
                    });
                } else if (layEvent === 'edit') { //编辑
                    window.location.href = "/officeBuilding/house/edit.do?id=" + data.houes_id;
                } else if (layEvent == 'SEE') {
                    layer.load(2);
                    layer.open({
                        type: 2,
                        title: "属性",
                        offset:'auto',
                        closeBtn: 1, //不显示关闭按钮
                        shade:  [0.8, '#393D49'],
                        area: ['920px', '600px'],
                        anim: 2,
                        content: ['/officeBuilding/house/edit.do?id='+ data.houes_id+'&&type=SEE'] //iframe的url，no代表不显示滚动条
                    });
                    layer.closeAll('loading');
                }
            });
            /**************************insulate**********************************/
        });
    }
</script>
</html>